<template>
  <div class="main">
    <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
        style="font-weight: bold;">上海市崇明区寄宿生关爱信息系统的用户（帐号）管理操作 </span> </div>
    <div class="main-body">
      <div class="main-header float-left">
        <el-button type="primary" @click="AddClick">新增本系统用户</el-button>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">

          <el-form-item label="学校：">
            <el-select v-model="formInline.schoolname" placeholder="请选择学校" clearable filterable>
              <el-option v-for="item in schoolList" :key="item.newXqdm" :label="item.xqjc" :value="item.newXqdm">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>

          </el-form-item>
        </el-form>
        <!-- </div> -->
      </div>

      <el-dialog title="教职工详细信息显示窗口" :visible.sync="dialogDetails" width="800px" :before-close="handleClose">
        <div style="text-align: center;width: 100%;height: 50px;background-color: antiquewhite;line-height: 50px;">
          此页面内容可以直接打印，请按右面的图标打印本页内容
          <el-button type="primary" icon="el-icon-printer" style="float: right;" v-print="printOption">打印</el-button>
        </div>
        <div style="padding: 16px;" class="font-all" id="nbprint">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border:none;">
            <tr>
              <td
                style=" border-style:none; text-align:left; font-size:18px; font-family:微软雅黑; text-align:center; height:40px;">
                教职工基本信息登记表
              </td>
            </tr>

          </table>

          <table border='0' cellspacing="0" cellpadding="0"
            style="border-collapse:collapse;border-style:none; font-size:13px; width:100%;">
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center; width:100px;">
                姓名
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; width:200px;">
                <span v-text="JiaoZhiGongInfo.XM"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; width:100px;">
                性别
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; width:200px;">
                <span v-text="JiaoZhiGongInfo.XB"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; width:100px;" rowspan="3">照片</td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                国家地区
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                <span v-text="JiaoZhiGongInfo.mc"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                民族
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center;">
                <span v-text="JiaoZhiGongInfo.MZ"></span>
              </td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                政治面貌
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                <span v-text="JiaoZhiGongInfo.ZZMM"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                出生年月
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center;">
                <span v-text="JiaoZhiGongInfo.CSNY"></span>
              </td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                身份证件类型
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                <span v-text="JiaoZhiGongInfo.SFZJLX"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                身份证件号码
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                <span v-text="JiaoZhiGongInfo.SFZJH"></span>
              </td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                现在编单位
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                <span v-text="JiaoZhiGongInfo.DJDW"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                编制所在校区
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                <span v-text="JiaoZhiGongInfo.DJXQ"></span>
              </td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                现工作单位
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                <span v-text="JiaoZhiGongInfo.GZDW"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                工作校区
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                <span v-text="JiaoZhiGongInfo.GZXQ"></span>
              </td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                教职工编号
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                <span v-text="JiaoZhiGongInfo.TeacherId"></span>
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; ">
                登记状态
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center;" colspan="2">
                <span v-text="JiaoZhiGongInfo.JSZT"></span>
              </td>
            </tr>
            <tr>
              <td style="border:1px solid #3c3c3c; height:33px; text-align:center;">
                联系电话
              </td>
              <td style="border:1px solid #3c3c3c; text-align:center; " colspan="4">
                <span v-text="JiaoZhiGongInfo.LXDH"></span>
              </td>

            </tr>
          </table>
          <table border='0' cellspacing="0" cellpadding="0"
            style="border-collapse:collapse;border-style:none; font-size:15px; width:100%;">
            <tr>
              <td style="text-align:right; font-size:13px; height:50px; line-height:50px; padding-right:10px;">
                查询日期:{{ getNowTimeDate() }}
              </td>
            </tr>
          </table>
        </div>

        <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogDetails = false">取 消</el-button>
            <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
          </span> -->
      </el-dialog>

      <div class="main-center float-left">
        <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
          :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="xm" label="用户姓名"></el-table-column>
          <el-table-column prop="login_id" label="登录账号名"></el-table-column>
          <el-table-column prop="gz_xqdmMc" label="所属单位"></el-table-column>
          <el-table-column prop="jb" label="级别"></el-table-column>
          <el-table-column prop="role" label="角色"></el-table-column>
          <el-table-column prop="syzt" label="账号状态">
          </el-table-column>
          <el-table-column prop="gwzt" label="岗位状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" style="z-index: -9999;">
              <el-button @click="deleteUser(scope.row)" type="text" size="small" style="color: #ff4d4f;"
                icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
            :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
          </el-pagination>
        </div>
      </div>

      <el-dialog title="用户权限信息的修改与设置窗口" :visible.sync="dialogVisibleAdd" width="800px" :before-close="handleClose1">
        <el-form ref="addform" :rules="ruless" :model="addForm" label-width="80px">
          <div
            style="height: 40px;background-color: #FFEDED;color: #1C511C;font-size: 16px; display: flex;justify-content: center;align-items: center;margin-bottom: 16px;">
            当前执行新增本系统用户，且分配权限的操作
          </div>
          <el-col :span="11">
            <el-form-item label="所属单位" prop="gz_xqdm">
              <el-select v-model="addForm.gz_xqdm" placeholder="请选择" style="width: 100%;" filterable @change="getUser">
                <el-option v-for="item in schoolList" :key="item.newXqdm" :label="item.xqjc" :value="item.newXqdm">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户姓名" prop="teacherId">
              <el-select v-model="addForm.teacherId" placeholder="请选择" style="width: 100%;" filterable
                @change="getteacher">
                <el-option v-for="item in teacherList" :key="item.teacherid" :label="item.xm" :value="item.teacherid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户级别" prop="jb">
              <el-radio-group v-model="addForm.jb">
                <el-radio label="区级"></el-radio>
                <el-radio label="校级"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户角色" prop="role">
              <el-radio-group v-model="addForm.role">
                <el-radio label="管理"></el-radio>
                <el-radio label="普通"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="岗位状态">
              <el-input v-model="addForm.gwzt" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="账号状态">
              <el-input v-model="addForm.syzt" readonly></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-form-item>
            <el-button type="primary" @click="onSubmit">确定新增系统用户</el-button>
            <el-button>取消</el-button>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleAdd = false">取 消</el-button>
          <el-button type="primary" @click="pushTO">确定新增系统用户</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
  name: 'Social',
  data() {
    return {
      printOption: {
        id: 'nbprint', // 打印元素的id 不需要携带#号
        popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: [],
      formInline: {
        schoolname: '',
        currentPage: 1,
        limit: 10,
        total: 0
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      dialogDetails: false,
      dialogVisibleAdd: false,
      JiaoZhiGongInfo: {},
      schoolList: [],
      teacherList: [],
      addForm: {
        gz_xqdm: '',
        teacherId: '',
        jb: '',
        role: '',
        dqzt: '',
        userid: ''
      },
      ruless: {
        gz_xqdm: [
          { required: true, message: '请选择所属单位', trigger: 'change' },
        ],
        teacherId: [
          { required: true, message: '请选择用户姓名', trigger: 'change' }
        ],
        jb: [
          { required: true, message: '请选择级别', trigger: 'change' }
        ],
        role: [
          { required: true, message: '请选择用户角色', trigger: 'change' }
        ],

      }

    }
  },
  mounted() {
    this.getOnGuardFacultyway()
  },
  methods: {
    deleteUser(row) {
      this.$confirm(`确认删除${row.xm}吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await httplogin.deleteUser(row.id);
        if (res.data.code == 200) {
          this.getOnGuardFacultyway()
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    pushTO() {
      this.$refs.addform.validate(async (valid) => {
        if (valid) {
          // let obj = {
          //   gz_xqdm: this.addForm.gz_xqdm,
          //   userid: this.addForm.teacherId,
          //   jb: this.addForm.jb,
          //   role: this.addForm.role,
          //   dqzt: this.addForm.dqzt,
          // }
          this.addForm.userid = this.addForm.teacherId
          // console.log(this.addForm);
          let res = await httplogin.saveUser(this.addForm);
          // console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: res.data.data.data
            });
            this.getOnGuardFacultyway()
          }
          this.dialogVisibleAdd = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    AddClick() {
      this.dialogVisibleAdd = true
      this.getschoolList()
    },
    async getUser(row) {
      this.addForm.teacherId = ''
      let obj = {
        xqdm: row
      }
      let res = await httplogin.getTeacherLoadData(obj);
      if (res.data.code == 200) {
        this.teacherList = res.data.data.data
      }
    },
    async getteacher(row) {
      let obj = {
        teacherId: row
      }
      let res = await httplogin.getGwztStart(obj);
      if (res.data.code == 200) {
        this.addForm.syzt = res.data.data.data[0].syzt || ''
        this.addForm.gwzt = res.data.data.data[0].gwzt || ''
      }
    },
    async getOnGuardFacultyway() {
      let obj = {
        current: this.formInline.currentPage,
        size: this.formInline.limit,
        gz_xqdm: this.formInline.schoolname
      }
      let res = await httplogin.getUserList2(obj);
      if (res.data.code == 200) {
        this.tableData = res.data.data.data.data;
        this.formInline.total = res.data.data.data.count
      }
    },
    async getschoolList() {
      let res = await httplogin.getLoadDataFilter();
      if (res.data.code == 200) {
        this.schoolList = res.data.data.data
      }
    },

    getNowTimeDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      // const hours = ('0' + now.getHours()).slice(-2);
      // const minutes = ('0' + now.getMinutes()).slice(-2);
      // const seconds = ('0' + now.getSeconds()).slice(-2);
      const formattedTime = year + "年" + month + "月" + day + "日"
      return formattedTime
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
      return list
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      // this.getOnGuardFacultyInfoway(row)
      // this.dialogDetails = true
    },
    async getOnGuardFacultyInfoway(val) {
      var data = {
        jzgId: val.TeacherID
      }
      var res = await httplogin.getOnGuardFacultyInfo(data)
      if (res.data.code == 200) {
        this.JiaoZhiGongInfo = res.data.data.jzgInfo

      }
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false
    },
    handleClose1() {
      this.dialogVisibleAdd = false
    },
    onSubmit() {
      this.getOnGuardFacultyway()
      // console.log(this.formInline);
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getOnGuardFacultyway()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val
      this.getOnGuardFacultyway()
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}
</style>